<div class="check-chart">
  <svg [attr.height]="chartHeight" [attr.width]="chartWidth" #svgContainer>
    <defs>
      <clipPath [attr.id]="name">
        <rect
          x="0"
          y="0"
          [attr.width]="viewWidth"
          [attr.height]="viewHeight"
          [attr.transform]="dataTranslate"
        ></rect>
      </clipPath>
    </defs>
    <g
      hsD3Axis
      [scale]="yScale"
      position="left"
      [attr.transform]="yAxisTranslate"
      *ngIf="!noData"
    ></g>
    <g
      hsD3Axis
      [scale]="xScale"
      [attr.transform]="xAxisTranslate"
      *ngIf="!noData"
    ></g>
    <g
      *ngFor="let plotBand of plotBands"
      [hs-d3-plot-band]="plotBand"
      [height]="viewHeight"
      [xScale]="xScale"
      [attr.transform]="dataTranslate"
      fill="#e12d393d"
    ></g>
    <g
      [hs-d3line]
      [data]="mappedData"
      [xScale]="xScale"
      [yScale]="yScale"
      [attr.transform]="dataTranslate"
      stroke="#14919B"
    ></g>
    <rect
      [attr.width]="viewWidth"
      [attr.height]="viewHeight"
      opacity="0"
      [attr.transform]="dataTranslate"
      #trackableRect
    ></rect>
    <g
      *ngIf="threshold && !noData"
      [attr.clip-path]="clipUrl"
      [hs-d3threshold]="threshold"
      [yScale]="yScale"
    ></g>
    <circle
      [ngStyle]="{ display: mouseIn ? 'block' : 'none' }"
      [attr.cx]="dotXPosition"
      [attr.cy]="dotYPosition"
      r="4"
      class="check-chart__dot"
    />
  </svg>
  <div
    class="check-chart__tooltip"
    [attr.transform]="tooltipTranslate"
    [ngStyle]="{ display: mouseIn ? 'block' : 'none' }"
    #tooltip
  >
    {{ tooltipText }}
  </div>
  <div class="check-chart__no-data" *ngIf="noData">
    <span>no data available</span>
  </div>
</div>
